<template>
	<div class="max oh">
		<my-header :backBtn="true">
			<div slot="title">行为规范</div>
		</my-header>
		<div class="cont-nof" style="background: #FFFFFF;">
			<div class="date_select flex">
				<img @click="changeDate(0)" src="@/../static/img/icon31.png" alt="">
				<span @click="showSelect">{{option.defaultValue[0]}}-{{option.defaultValue[1]}}-{{option.defaultValue[2]}}</span>
				<img @click="changeDate(1)" src="@/../static/img/icon32.png" alt="">
				<my-select :option="option" v-if="selectDate" ref="selectDate" @on-change="change"></my-select>
			</div>
			<template v-if="access!='kinsfolk'">
				<div class="select-class">
					<span class="fl">班级</span>
					<select class="fr select-box" @change="queryFn" v-model="params.clazzId">
						<option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
					</select>
				</div>
				<div class="select-class">
					<span class="fl">学生</span>
					<select class="fr select-box" @change="queryFn" v-model="params.clazzId">
						<option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
					</select>
				</div>
			</template>
			<template v-else>
				<div class="kid-info flex">
					<div class="kid-avatar">
						<img src="" alt="">
					</div>
					<div class="kid-info-text tl flex">
						<div>
							姓名：马小跳
						</div>
						<div>
							班级：雏鹰班
						</div>
						<div>
							主班号码：15687485412
						</div>
					</div>
				</div>
			</template>
			<div class="title-icon-blue title-icon" style="background-image: url(../../../../../static/img/qingkuang.png);">
				宝贝情况
			</div>
			<div class="tag-list flex" :class="{'kinsfolk-tag':access=='kinsfolk'}">
				<div v-for="item in tagList" :key="item" class="tag-item">
					{{item}}
					<span class="tag-del" @click="delTagFn(item)">x</span>
				</div>
				<form action="javascript:void 0" v-if="access!='kinsfolk'">
					<input type="text" @keyup.13="tapToCreatedFn" v-model="tag" placeholder="请输入标签">
				</form>
			</div>
			<div class="tag-list" v-if="access!='kinsfolk'">
				<div class="tl oh tag-title">
					<span class="fl">
						情况
					</span>
					<span class="fr open" v-html="open?'收起':'展开'" @click="open=!open">
						展开
					</span>
				</div>
				<div class="flex oh" style="flex-wrap: wrap;" :class="{'situation-open':open}">
					<div @touchstart="start(item)" @touchend="end" v-for="item in cookiesTag" class="tag-item tag-select" :class="{'selected':tagList.indexOf(item)!=-1}"
					 @click="addTagFn(item)">
						{{item}}
					</div>
				</div>
			</div>
			<div class="title-icon-orange title-icon" style="background-image: url(../../../../../static/img/fankui.png);">
				教师反馈
			</div>
			<div class="feedback-input">
				<contenteditable placeholder="请输入反馈内容" @input="getContent" :styles="{'padding':'0.5rem','min-height':'10rem'}"></contenteditable>
			</div>
			<template v-if="access!='kinsfolk'">
				<div class="submit" @click="submitFn" v-if="!save">
					推送给家长
				</div>
				<div class="submit" v-else>
					正在推送...
				</div>
			</template>
		</div>
		<div class="weui-mask" v-if="delTips">
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
				<div class="weui-dialog__bd">确定删除<span style="color: red;"> {{tag}} </span>标签？</div>
				<div class="weui-dialog__ft">
					<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="delTips = false">取消</a>
					<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" @click="delOK">确定</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import contenteditable from '@/components/contenteditable.vue';
	import mySelect from '@/components/select.vue'
	export default {
		components: {
			mySelect,
			contenteditable
		},
		data() {
			let time = this.$getNowDate('date');
			return {
				// access: this.$Cookies.get('loginType'),
				access: 'kinsfolk',
				option: {
					defaultValue: []
				},
				open: true,
				cookiesTag: [], //已存标签
				tagList: [], //已输入的标签
				tag: '', //正在操作的标签
				longTapTimer: null, //长按的定时器
				delTips: false, //删除提示
				selectDate: false,
				save: false,
				params: {
					clazzId: '',
					current: 1,
					size: 10,
					pages: 0,
					direction: 0,
					day: time,
				},
				clazzList: [],
			}
		},
		methods: {
			getContent(val) {

			},
			submitFn() {
				this.save = true;
			},
			delOK() { //删除已有标签
				let index = this.cookiesTag.indexOf(this.tag);
				this.cookiesTag.splice(index, 1);
				this.tag = '';
				this.delTips = false;
			},
			start(val) { //长按标签
				clearTimeout(this.longTapTimer); //再次清空定时器，防止重复注册定时器
				this.longTapTimer = setTimeout(function() {
					this.delTips = true;
					this.tag = val;
				}.bind(this), 1000);
			},
			end() { //长按结束
				clearTimeout(this.longTapTimer); //清空定时器，防止重复注册定时器
				this.longTapTimer = null;
			},
			addTagFn(val) {
				let index = this.tagList.indexOf(val);
				if (index == -1) {
					this.tagList.push(val);
				} else {
					this.tagList.splice(index, 1);
				}
			},
			delTagFn(val) {
				let index = this.tagList.indexOf(val);
				this.tagList.splice(index, 1);
			},
			tapToCreatedFn() {
				this.tag = this.tag.replace(/\s+/g, "");
				if (this.tag.length > 10) this.$weui.topTips('标签文字不能超过10');
				else if (this.tag.length == 0) this.$weui.topTips('标签不能为空');
				else {
					if (this.tagList.indexOf(this.tag) == -1) {
						this.tagList.push(this.tag);
						this.save = false;
					} else this.$weui.topTips('重复标签');
				}
				this.tag = '';
			},
			fetchClazzList() {
				this.$http.fetchClazzList().then(resp => {
					let clazzList = resp.data;
					this.clazzList = clazzList;
					this.params.clazzId = clazzList[0].id;
				})
			},
			queryFn() {
				return
				this.$http.fetchStudentRecord(this.params).then(resp => {
					let data = resp.data;
					this.list = data.records;
					this.params.current = data.current;
					this.params.size = data.size;
					this.params.pages = data.pages;
				})
			},
			fix2(val) {
				if (val < 10) return '0' + val
				else return val
			},
			showSelect() { //显示时间选择框
				this.selectDate = true;
				this.$nextTick(() => {
					this.$refs.selectDate.showDatePicker();
				})
			},
			change(date) { //时间选择回调
				let month = date[1].value;
				let day = date[2].value;
				this.option.defaultValue = [date[0].value, this.fix2(month), this.fix2(day)];
				this.selectDate = false;
			},
			changeDate(type) { //前一天后一天
				let str = this.option.defaultValue.join('-');
				let ms = new Date(str).getTime();
				if (type) ms += 86400000;
				else ms -= 86400000;
				let time = new Date(ms);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let date = time.getDate();
				this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
			},
		},
		created() {
			let time = new Date();
			let year = time.getFullYear();
			let month = time.getMonth() + 1;
			let date = time.getDate();
			this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
			if (this.access == 'kinsfolk') {
				//获取学生信息
			} else {
				//获取班级信息
				let str = this.$Cookies.get('taglist');
				if (str) this.cookiesTag = JSON.parse(str);
				this.fetchClazzList();
			}
		},
		beforeDestroy() {
			if (this.save && this.access != 'kinsfolk') {
				let list = this.$unique(this.cookiesTag, this.tagList);
				let str = JSON.stringify(list);
				this.$Cookies.set('taglist', str);
			}
		}
	}
</script>

<style scoped>
	.date_select {
		font-size: 1.6rem;
		margin: 1rem 0 2rem;
		justify-content: center;
	}

	.date_select img {
		height: 1.6rem;
		margin: 0 2rem;
	}

	.select-stu,
	.select-class {
		width: calc(100% - 3rem);
		height: 3.6rem;
		margin: 1rem auto;
		line-height: 3.6rem;
	}

	.select-name {
		width: 15%;
	}

	.select-box {
		width: 85%;
		height: 100%;
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
		border-radius: 4px;
	}

	.tag-list {
		width: calc(100% - 3rem);
		padding: 0.5rem;
		font-size: 1.2rem;
		margin: auto;
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.kinsfolk-tag {
		min-height: 9rem;
	}

	.tag-title {
		margin-bottom: 1rem;
		font-size: 1.4rem;
		line-height: 2rem;
		height: 2rem;
	}

	.tag-item {
		height: 3rem;
		line-height: 3rem;
		padding: 0 0.5rem;
		margin: 0 0.5rem 0.5rem 0;
		background: #36C12D;
		color: #FFFFFF;
		border-radius: 4px;
	}

	.tag-list input {
		padding: 0.5rem;
		width: 8rem;
		height: 2.9rem;
		box-sizing: border-box;
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}

	.tag-del {
		display: inline-block;
		height: 100%;
		border-left: 1px solid rgba(255, 255, 255, 0.3);
		margin-left: 0.5rem;
		padding-left: 0.5rem;
	}

	.tag-select {
		box-sizing: border-box;
		background-color: rgba(243, 255, 255, 1);
		border: 1px solid rgba(224, 235, 237, 1);
		color: rgba(15, 161, 234, 1);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.tag-select.selected {
		background: #36C12D;
		color: #FFFFFF;
		border: none;
	}

	.open {
		text-decoration: underline;
		color: rgba(15, 161, 234, 1);
		font-size: 1rem;
	}

	.situation-open {
		height: 3rem;
	}

	.feedback-input {
		width: calc(100% - 3rem);
		min-height: 10rem;
		margin: 0 auto 5rem;
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
	}

	.submit {
		margin: auto;
		width: 15rem;
		height: 3rem;
		line-height: 3rem;
		border-radius: 25px;
		background-color: #36C12D;
		color: rgba(255, 255, 255, 1);
		font-size: 1.6rem;
		text-align: center;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0);
	}

	.kid-info {
		width: calc(100% - 3rem);
		margin: auto;
		height: 11rem;
		background-color: rgba(249, 249, 249, 1);
		padding: 1.5rem;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.kid-avatar {
		width: 8rem;
		height: 8rem;
		background: #E5E5E5;
	}

	.kid-info-text {
		width: calc(100% - 10rem);
		font-size: 1.6rem;
		height: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		line-height: 1;
	}
</style>
